<!DOCTYPE html>
<html>
<head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Styled Buttons</title>

    <style type="text/css">

        html, body {
            font-size: 11px;
            font-family: sans-serif;
        }

        .section {
            margin: 2em 0;
            border: 1px solid #CCC;
            padding: 2em;
            overflow: hidden;
            zoom: 1;
        }

        h2 {
            font-size: 1.1em;
            margin: 0 0 2em;
        }

        .button {
            background: none;
            border: 0;
            padding: 0;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
            font-size: 11px;
            margin-right: 2em;
            cursor: pointer;
            overflow: visible; /* prevent extra horizontal padding in IE */
            behavior: url(../build/PIE.htc);
            white-space: nowrap;
            position: relative;
            -pie-lazy-init: true;
        }
        .button::-moz-focus-inner { /* prevent extra padding in Firefox */
            padding: 0;
            border: 0;
        }




        
        #test1 .button {
            background: #EFD;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EFD), to(#BF6));
            background: -moz-linear-gradient(#EFD, #BF6);
            background: linear-gradient(#EFD, #BF6);
            -pie-background: linear-gradient(#EFD, #BF6);
            color: #09700B;
            font-size: 14px;
            padding: 12px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border: 1px solid #87C462;
            -webkit-box-shadow: #C0C0C0 3px 3px 6px;
            -moz-box-shadow: #C0C0C0 3px 3px 6px;
            box-shadow: #C0C0C0 3px 3px 6px;
        }
        #test1 .button:hover,
        #test1 .button.pie_hover {
            border-width: 2px;
            padding: 11px;
        }


        #test2 .button {
            padding: 2px 10px;
            font-weight: bold;
            font-size: 11px;
            line-height: 15px;
            background: #EEE;
            color: #333;
            border: 1px solid #FFF;
            -webkit-border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: #666 0 0 4px;
            -moz-box-shadow: #666 0 0 4px;
            box-shadow: #666 0 0 4px;
        }
        #test2 .button:hover,
        #test2 .button.pie_hover {
            -webkit-box-shadow: #333 0 0 6px;
            -moz-box-shadow: #333 0 0 6px;
            box-shadow: #333 0 0 6px;
        }





        #test3 .button {
            border: 1px solid #AEAEAE;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-weight: bold;
            color: #666;
            padding: 4px 12px;
            /*text-shadow: #FFF 0 -1px;*/
            background: #E6E6E6;
            background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), color-stop(0.4, #E6E6E6), color-stop(0.6, #D6D6D6), to(#CECECE));
            background: -moz-linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
            background: linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
            -pie-background: linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
            -webkit-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
            -moz-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
            box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
        }
        #test3 .button:hover,
        #test3 .button.pie_hover {
            -webkit-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
            -moz-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
            box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
        }
        #test3 .style2 .button {
            color: #FFF;
            /*text-shadow: #AB2525 0 -1px;*/
            border-color: #AB2525;
            background: #D50623;
            background: -webkit-gradient(linear, left top, left bottom, from(#EA655E), color-stop(0.4, #EA655E), color-stop(0.6, #D50623), to(#D50623));
            background: -moz-linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
            background: linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
            -pie-background: linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
        }
        #test3 .style3 .button {
            color: #FFF;
            /*text-shadow: #3774C8 0 -1px;*/
            border-color: #3774C8;
            background: #097FEB;
            background: -webkit-gradient(linear, left top, left bottom, from(#B0D2EF), color-stop(0.4, #44A4E8), color-stop(0.6, #168CE6), to(#097FEB));
            background: -moz-linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
            background: linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
            -pie-background: linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
        }
        #test3 .style4 .button {
            color: #FFF;
            /*text-shadow: #DFB844 0 -1px;*/
            border-color: #DFB844;
            background: #EDD077;
            background: -webkit-gradient(linear, left top, left bottom, from(#F6E6B6), color-stop(0.4, #EDD077), color-stop(0.6, #E3B62E), to(#DFB844));
            background: -moz-linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
            background: linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
            -pie-background: linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
        }
        #test3 .style5 .button {
            color: #FFF;
            /*text-shadow: #DFB844 0 -1px;*/
            border-color: #EF7210;
            background: #EF7311;
            background: -webkit-gradient(linear, left top, left bottom, from(#F3A66B), color-stop(0.4, #F08A3A), color-stop(0.6, #F08029), to(#EF7311));
            background: -moz-linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
            background: linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
            -pie-background: linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
        }



        #test4 .button {
            float: left;
            padding: 0 14px;
            height: 22px;
            line-height: 22px;
            color: #FFF;
            background: #71B6E8;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#71B6E8), to(#2E76CF));
            background: -moz-linear-gradient(#71B6E8, #2E76CF);
            background: linear-gradient(#71B6E8, #2E76CF);
            -pie-background: linear-gradient(#71B6E8, #2E76CF);
            -webkit-border-radius: 11px;
            -moz-border-radius: 11px;
            border-radius: 11px;
            -webkit-box-shadow: #666 0 1px 3px;
            -moz-box-shadow: #666 0 1px 3px;
            box-shadow: #666 0 1px 3px;
        }


        #test5 .button {
            float: left;
            height: 26px;
            line-height: 26px;
            font-family: Helvetica, sans-serif;
            font-weight: bold;
            border-width: 0 8px 0 14px;
            color: white;
            /*text-shadow: #000 0px 1px 1px;*/
            -webkit-border-image: url("iPhoneBackButton.png") 0 8 0 14;
            -moz-border-image: url("iPhoneBackButton.png") 0 8 0 14;
            border-image: url("iPhoneBackButton.png") 0 8 0 14 fill;
        }


        #test6 .button {
            float: left;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 4px #CCC;
            -moz-box-shadow: 0 1px 4px #CCC;
            box-shadow: 0 1px 4px #CCC;
            background: #E1E1E1;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E1E1E1));
            background: -moz-linear-gradient(#FFF, #E1E1E1);
            background: linear-gradient(#FFF, #E1E1E1);
            -pie-background: linear-gradient(#FFF, #E1E1E1);
            border: 0;
            border-bottom: 1px solid #EBEBEB;
            color:#333333;
            font-family:helvetica,arial,freesans,clean,sans-serif;
            font-size:12px;
            font-weight:bold;
            height:34px;
            line-height: 36px;
            margin-left:10px;
            overflow:visible;
            padding:0 13px;
            text-shadow:1px 1px 0 #FFFFFF;
        }
    #test6 .button:hover,
    #test6 .button.pie_hover {
        background: #0CA6DD;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#0CA6DD), to(#0770A0));
        background: -moz-linear-gradient(#0CA6DD, #0770A0);
        background: linear-gradient(#0CA6DD, #0770A0);
        -pie-background: linear-gradient(#0CA6DD, #0770A0);
        border-bottom-color: #0770A0;
        color:#FFFFFF;
        text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.3);
    }


    #test7 div {
        padding: 20px 0;
        border-bottom: solid 1px #ccc;
    }
    #test7 .wdwbutton  {
        display: inline-block;
        zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
        *display: inline;
        vertical-align: baseline;
        margin: 0 2px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);

        /* added: */
        behavior: url(../build/PIE.htc);
        overflow: visible;
        -pie-lazy-init: true;
    }
    #test7 .wdwbutton:hover {
        text-decoration: none;
    }
    #test7 .wdwbutton:active {
        position: relative;
        top: 1px;
    }

    #test7 .bigrounded {
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    #test7 .medium {
        font-size: 12px;
        padding: .4em 1.5em .42em;
    }
    #test7 .small {
        font-size: 11px;
        padding: .2em 1em .275em;
    }
    /* black */
    #test7 .black {
        color: #d7d7d7;
        border: solid 1px #333;
        background: #333;
        background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
        background: -moz-linear-gradient(top,  #666,  #000);
        background: linear-gradient(top,  #666,  #000);
        -pie-background: linear-gradient(top,  #666,  #000);
    }
    #test7 .black:hover {
        background: #000;
        background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
        background: -moz-linear-gradient(top,  #444,  #000);
        background: linear-gradient(top,  #444,  #000);
        -pie-background: linear-gradient(top,  #444,  #000);
    }
    #test7 .black:active {
        color: #666;
        background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
        background: -moz-linear-gradient(top,  #000,  #444);
        background: linear-gradient(top,  #000,  #444);
        -pie-background: linear-gradient(top,  #000,  #444);
    }

    /* gray */
    #test7 .gray {
        color: #e9e9e9;
        border: solid 1px #555;
        background: #6e6e6e;
        background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
        background: -moz-linear-gradient(top,  #888,  #575757);
        background: linear-gradient(top,  #888,  #575757);
        -pie-background: linear-gradient(top,  #888,  #575757);
    }
    #test7 .gray:hover {
        background: #616161;
        background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
        background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
        background: linear-gradient(top,  #757575,  #4b4b4b);
        -pie-background: linear-gradient(top,  #757575,  #4b4b4b);
    }
    #test7 .gray:active {
        color: #afafaf;
        background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
        background: -moz-linear-gradient(top,  #575757,  #888);
        background: linear-gradient(top,  #575757,  #888);
        -pie-background: linear-gradient(top,  #575757,  #888);
    }

    /* white */
    #test7 .white {
        color: #606060;
        border: solid 1px #b7b7b7;
        background: #fff;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        background: -moz-linear-gradient(top,  #fff,  #ededed);
        background: linear-gradient(top,  #fff,  #ededed);
        -pie-background: linear-gradient(top,  #fff,  #ededed);
    }
    #test7 .white:hover {
        background: #ededed;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
        background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
        background: linear-gradient(top,  #fff,  #dcdcdc);
        -pie-background: linear-gradient(top,  #fff,  #dcdcdc);
    }
    #test7 .white:active {
        color: #999;
        background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
        background: -moz-linear-gradient(top,  #ededed,  #fff);
        background: linear-gradient(top,  #ededed,  #fff);
        -pie-background: linear-gradient(top,  #ededed,  #fff);
    }

    /* orange */
    #test7 .orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        background: linear-gradient(top,  #faa51a,  #f47a20);
        -pie-background: linear-gradient(top,  #faa51a,  #f47a20);
    }
    #test7 .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        background: linear-gradient(top,  #f88e11,  #f06015);
        -pie-background: linear-gradient(top,  #f88e11,  #f06015);
    }
    #test7 .orange:active {
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
        background: linear-gradient(top,  #f47a20,  #faa51a);
        -pie-background: linear-gradient(top,  #f47a20,  #faa51a);
    }

    /* red */
    #test7 .red {
        color: #faddde;
        border: solid 1px #980c10;
        background: #d81b21;
        background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
        background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
        background: linear-gradient(top,  #ed1c24,  #aa1317);
        -pie-background: linear-gradient(top,  #ed1c24,  #aa1317);
    }
    #test7 .red:hover {
        background: #b61318;
        background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
        background: -moz-linear-gradient(top,  #c9151b,  #a11115);
        background: linear-gradient(top,  #c9151b,  #a11115);
        -pie-background: linear-gradient(top,  #c9151b,  #a11115);
    }
    #test7 .red:active {
        color: #de898c;
        background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
        background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
        background: linear-gradient(top,  #aa1317,  #ed1c24);
        -pie-background: linear-gradient(top,  #aa1317,  #ed1c24);
    }

    /* blue */
    #test7 .blue {
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        background: linear-gradient(top,  #00adee,  #0078a5);
        -pie-background: linear-gradient(top,  #00adee,  #0078a5);
    }
    #test7 .blue:hover {
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
        background: linear-gradient(top,  #0095cc,  #00678e);
        -pie-background: linear-gradient(top,  #0095cc,  #00678e);
    }
    #test7 .blue:active {
        color: #80bed6;
        background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
        background: -moz-linear-gradient(top,  #0078a5,  #00adee);
        background: linear-gradient(top,  #0078a5,  #00adee);
        -pie-background: linear-gradient(top,  #0078a5,  #00adee);
    }

    /* rosy */
    #test7 .rosy {
        color: #fae7e9;
        border: solid 1px #b73948;
        background: #da5867;
        background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
        background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
        background: linear-gradient(top,  #f16c7c,  #bf404f);
        -pie-background: linear-gradient(top,  #f16c7c,  #bf404f);
    }
    #test7 .rosy:hover {
        background: #ba4b58;
        background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
        background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
        background: linear-gradient(top,  #cf5d6a,  #a53845);
        -pie-background: linear-gradient(top,  #cf5d6a,  #a53845);
    }
    #test7 .rosy:active {
        color: #dca4ab;
        background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
        background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
        background: linear-gradient(top,  #bf404f,  #f16c7c);
        -pie-background: linear-gradient(top,  #bf404f,  #f16c7c);
    }

    /* green */
    #test7 .green {
        color: #e8f0de;
        border: solid 1px #538312;
        background: #64991e;
        background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
        background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
        background: linear-gradient(top,  #7db72f,  #4e7d0e);
        -pie-background: linear-gradient(top,  #7db72f,  #4e7d0e);
    }
    #test7 .green:hover {
        background: #538018;
        background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
        background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
        background: linear-gradient(top,  #6b9d28,  #436b0c);
        -pie-background: linear-gradient(top,  #6b9d28,  #436b0c);
    }
    #test7 .green:active {
        color: #a9c08c;
        background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
        background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
        background: linear-gradient(top,  #4e7d0e,  #7db72f);
        -pie-background: linear-gradient(top,  #4e7d0e,  #7db72f);
    }

    /* pink */
    #test7 .pink {
        color: #feeef5;
        border: solid 1px #d2729e;
        background: #f895c2;
        background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
        background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
        background: linear-gradient(top,  #feb1d3,  #f171ab);
        -pie-background: linear-gradient(top,  #feb1d3,  #f171ab);
    }
    #test7 .pink:hover {
        background: #d57ea5;
        background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
        background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
        background: linear-gradient(top,  #f4aacb,  #e86ca4);
        -pie-background: linear-gradient(top,  #f4aacb,  #e86ca4);
    }
    #test7 .pink:active {
        color: #f3c3d9;
        background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
        background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
        background: linear-gradient(top,  #f171ab,  #feb1d3);
        -pie-background: linear-gradient(top,  #f171ab,  #feb1d3);
    }



    </style>

</head>
<body>

    <h1>Demos of button styles</h1>
    <p>Each demo shows the same button-like styling on a <code>&lt;a&gt;</code> element and on a <code>&lt;button&gt;</code> element.</p>

    <div class="section" id="test1">
        <h2>Ala mozilla.com</h2>
        <a href="#" class="button">I'm a link, as cute as a button</a>
        <button class="button">I'm actually a &lt;button/&gt;</button>
        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
    </div>

    <div class="section" id="test2">
        <h2>Ala detelefoongids.nl</h2>
        <a href="#" class="button">I'm a link, as cute as a button</a>
        <button class="button">I'm actually a &lt;button/&gt;</button>
        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
    </div>

    <div class="section" id="test3">
        <h2>Ala realestate.com.au</h2>
        <p class="style1">
            <a href="#" class="button">I'm a link, as cute as a button</a>
            <button class="button">I'm actually a &lt;button/&gt;</button>
            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
        </p>
        <p class="style2">
            <a href="#" class="button">I'm a link, as cute as a button</a>
            <button class="button">I'm actually a &lt;button/&gt;</button>
            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
        </p>
        <p class="style3">
            <a href="#" class="button">I'm a link, as cute as a button</a>
            <button class="button">I'm actually a &lt;button/&gt;</button>
            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
        </p>
        <p class="style4">
            <a href="#" class="button">I'm a link, as cute as a button</a>
            <button class="button">I'm actually a &lt;button/&gt;</button>
            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
        </p>
        <p class="style5">
            <a href="#" class="button">I'm a link, as cute as a button</a>
            <button class="button">I'm actually a &lt;button/&gt;</button>
            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
        </p>
    </div>

    <div class="section" id="test4">
        <h2>Ala itunes.com</h2>
        <a href="#" class="button">I'm a link, as cute as a button</a>
        <button class="button">I'm actually a &lt;button/&gt;</button>
        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
    </div>

    <div class="section" id="test5">
        <h2>iPhone back button  (<a href="http://groupaware.mobi/iphone/#_Samples">source</a>)</h2>
        <a href="#" class="button">I'm a link, as cute as a button</a>
        <button class="button">I'm actually a &lt;button/&gt;</button>
        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
    </div>

    <div class="section" id="test6">
        <h2>Ala GitHub.com</h2>
        <a href="#" class="button">I'm a link, as cute as a button</a>
        <button class="button">I'm actually a &lt;button/&gt;</button>
        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
    </div>

    <div class="section" id="test7">
        <h2>Webdesignerwall.com CSS3 Buttons Demo (<a href="http://www.webdesignerwall.com/demo/css-buttons.html">Source</a>)</h2>

        <div>
            <a href="#" class="wdwbutton black">Rectangle</a>  or
            <a href="#" class="wdwbutton black bigrounded">Rounded</a> Can be
            <a href="#" class="wdwbutton black medium">Medium</a> or
            <a href="#" class="wdwbutton black small">Small</a>
            <br /><br />
            <input class="wdwbutton black" type="button" value="Input Element" />
            <button class="wdwbutton black">Button Tag</button>

            <span class="wdwbutton black">Span</span>
            <div class="wdwbutton black">Div</div>
            <p class="wdwbutton black">P Tag</p>
            <h3 class="wdwbutton black">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton gray">Gray</a>
            <a href="#" class="wdwbutton gray bigrounded">Rounded</a>
            <a href="#" class="wdwbutton gray medium">Medium</a>
            <a href="#" class="wdwbutton gray small">Small</a>
            <br /><br />

            <input class="wdwbutton gray" type="button" value="Input Element" />
            <button class="wdwbutton gray">Button Tag</button>
            <span class="wdwbutton gray">Span</span>
            <div class="wdwbutton gray">Div</div>
            <p class="wdwbutton gray">P Tag</p>
            <h3 class="wdwbutton gray">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton white">White</a>
            <a href="#" class="wdwbutton white bigrounded">Rounded</a>
            <a href="#" class="wdwbutton white medium">Medium</a>
            <a href="#" class="wdwbutton white small">Small</a>
            <br /><br />

            <input class="wdwbutton white" type="button" value="Input Element" />
            <button class="wdwbutton white">Button Tag</button>
            <span class="wdwbutton white">Span</span>
            <div class="wdwbutton white">Div</div>
            <p class="wdwbutton white">P Tag</p>
            <h3 class="wdwbutton white">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton orange">Orange</a>
            <a href="#" class="wdwbutton orange bigrounded">Rounded</a>
            <a href="#" class="wdwbutton orange medium">Medium</a>
            <a href="#" class="wdwbutton orange small">Small</a>
            <br /><br />

            <input class="wdwbutton orange" type="button" value="Input Element" />
            <button class="wdwbutton orange">Button Tag</button>
            <span class="wdwbutton orange">Span</span>
            <div class="wdwbutton orange">Div</div>
            <p class="wdwbutton orange">P Tag</p>
            <h3 class="wdwbutton orange">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton red">Red</a>
            <a href="#" class="wdwbutton red bigrounded">Rounded</a>
            <a href="#" class="wdwbutton red medium">Medium</a>
            <a href="#" class="wdwbutton red small">Small</a>
            <br /><br />

            <input class="wdwbutton red" type="button" value="Input Element" />
            <button class="wdwbutton red">Button Tag</button>
            <span class="wdwbutton red">Span</span>
            <div class="wdwbutton red">Div</div>
            <p class="wdwbutton red">P Tag</p>
            <h3 class="wdwbutton red">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton blue">Blue</a>
            <a href="#" class="wdwbutton blue bigrounded">Rounded</a>
            <a href="#" class="wdwbutton blue medium">Medium</a>
            <a href="#" class="wdwbutton blue small">Small</a>
            <br /><br />

            <input class="wdwbutton blue" type="button" value="Input Element" />
            <button class="wdwbutton blue">Button Tag</button>
            <span class="wdwbutton blue">Span</span>
            <div class="wdwbutton blue">Div</div>
            <p class="wdwbutton blue">P Tag</p>
            <h3 class="wdwbutton blue">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton rosy">Rosy</a>
            <a href="#" class="wdwbutton rosy bigrounded">Rounded</a>
            <a href="#" class="wdwbutton rosy medium">Medium</a>
            <a href="#" class="wdwbutton rosy small">Small</a>
            <br /><br />

            <input class="wdwbutton rosy" type="button" value="Input Element" />
            <button class="wdwbutton rosy">Button Tag</button>
            <span id="scrolltest" class="wdwbutton rosy">Span</span>
            <div class="wdwbutton rosy">Div</div>
            <p class="wdwbutton rosy">P Tag</p>
            <h3 class="wdwbutton rosy">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton green">Green</a>
            <a href="#" class="wdwbutton green bigrounded">Rounded</a>
            <a href="#" class="wdwbutton green medium">Medium</a>
            <a href="#" class="wdwbutton green small">Small</a>
            <br /><br />

            <input class="wdwbutton green" type="button" value="Input Element" />
            <button class="wdwbutton green">Button Tag</button>
            <span class="wdwbutton green">Span</span>
            <div class="wdwbutton green">Div</div>
            <p class="wdwbutton green">P Tag</p>
            <h3 class="wdwbutton green">H3</h3>
        </div>

        <div>
            <a href="#" class="wdwbutton pink">Pink</a>
            <a href="#" class="wdwbutton pink bigrounded">Rounded</a>
            <a href="#" class="wdwbutton pink medium">Medium</a>
            <a href="#" class="wdwbutton pink small">Small</a>
            <br /><br />

            <input class="wdwbutton pink" type="button" value="Input Element" />
            <button class="wdwbutton pink">Button Tag</button>
            <span class="wdwbutton pink">Span</span>
            <div class="wdwbutton pink">Div</div>
            <p class="wdwbutton pink">P Tag</p>
            <h3 class="wdwbutton pink">H3</h3>
        </div>

    </div>

</body>
</html>